<template>
	<view class="container">
        <div v-if="list.length" class="address-list">
            <div class="address-item" v-for="item in list" :key="item.id" @click="selectAddress(item)">
                <div class="address-wrapper">
                    <div class="address-content">
                        <div class="address-info">
                            <div class="name">{{item.receiver}}</div>
                            <div class="mobile">{{item.mobile}}</div>
                        </div>
                        <div class="address">{{getAddress(item)}} {{item.detail}}</div>
                    </div>
                    <div class="edit-address" @click.stop="editAddress(item)">
                        <u-icon name="edit-pen" color="#999" size="34"></u-icon>
                    </div>
                </div>
                <div class="address-footer">
                    <div class="default-address" @click.stop="setDefaultAddress(item)">
                        <u-icon v-if="item.isDefault == '1'" name="checkmark-circle-fill" color="#59C4CA" size="36"></u-icon>
                        <u-icon v-else name="checkmark-circle" color="#ccc" size="36"></u-icon>
                        <div style="margin-left: 6rpx">默认地址</div>
                        </div>
                    <div class="delete-address" @click="showDeleteModal(item.id)">删除</div>
                </div>
            </div>
        </div>

        <!-- 空数据 -->
        <u-empty v-else text="暂无收货地址，快去添加吧！" mode="list" :margin-top="200"></u-empty>

        <!-- 添加 -->
        <div class="footer">
    		<button class="btn-confirm" @click="addAddress">+ 添加收货地址</button>
        </div>

        <!-- 删除确认弹窗 -->
        <u-modal v-model="show" :show-cancel-button="true" :mask-close-able="true"  :async-close="true" confirm-color="#59C4CA" content="确定删除该收货地址吗?" @confirm="deleteAddress"></u-modal>

        <u-toast ref="uToast" />
	</view>
</template>
<script>
import { DefaultAddress } from '@/api/config/enums';
import Vue from 'vue';
import { getAddressListAPI, deleteAddressAPI, updateAddressAPI } from '../../api/address'

const app = getApp()
export default Vue.extend({
    data(){
        return {
            receiver: '',
            mobile: '',
            detail: '',
            show: false,
            id: '',
            list: [], //
            addressList: app.globalData.addressList,
            from: ''
        }
    },
    onLoad(options){
        this.from = options.from
    },
    onShow(){
        this.init()
    },
    methods: {
        init(){
            getAddressListAPI({
                sessionId: app.globalData.sessionId
            }).then(res => {
                this.list = res.userAddressList
            }).catch(err => {
                this.$refs.uToast.show({
				    title: err,
				    type: 'error',
                })
            })
        },
        selectAddress(item){
            if(this.from){
                app.globalData.selectedAddress = item
                this.$u.route({type: 'navigateBack'})
            }
        },
        // 获取省市县名称
        getAddress(item){
            try{
                let pId = item.province
                let cId = item.city
                let dId = item.district
                let province, city, district

                province = this.addressList.find(p => p.id == pId)
                if(province) city = province.listCity.find(c => c.id == cId)
                if(city) district = city.listDistrict.find(d => d.id == dId)
                let provinceName = province ? province.name : ''
                let cityName = city ? city.name : ''
                let districtName = district ? district.name : ''
                return `${provinceName} ${cityName} ${districtName}`
            }catch(err){
                this.$refs.uToast.show({
				    title: '地址管理-初始化省市县名称失败',
				    type: 'error',
                })
            }
        },
        // 设为默认地址
        setDefaultAddress(item){
            if(item.isDefault == '1') return false
            updateAddressAPI({
                sessionId: app.globalData.sessionId,
                id: item.id,
                receiver: item.receiver,
	            mobile: item.mobile,
	            province: item.province,
	            city: item.city,
	            district: item.district,
	            detail: item.detail,
	            isDefault: DefaultAddress.Yes
            }).then(res => {
                this.init()
            }).catch(err => {
                this.$refs.uToast.show({
				    title: err,
				    type: 'error',
                })
            })
        },
        editAddress(item){
           	this.$u.route('pages/address/address', item)
        },
        showDeleteModal(id){
            this.show = true;
            this.id = id
        },
        deleteAddress(){
            deleteAddressAPI({
                id: this.id, 
                sessionId: app.globalData.sessionId
            }).then(res => {
                this.show = false
                this.init()
            }).catch(err => {
                this.$refs.uToast.show({
				    title: err,
				    type: 'error',
                })
            })
        },
        addAddress(){
           	this.$u.route('pages/address/address')
        }
    }
})
</script>
<style lang="scss" scoped>
@import '../../assets/scss/common.scss';

.container{
    padding: 15px;
    min-height: 100vh;
    background-color: #efefef;
}
.address-list{
    .address-item{
        margin-bottom: 15px;
        border-radius: 15rpx;
        background-color: #fff;
        padding: 15rpx 0;
        .address-wrapper{
            display: flex;
            .address-content{
                flex: auto;
                padding-left: 30rpx;
                .address-info{
                    display: flex;
                    .name{
                        font-size: 36rpx;
                        line-height: 1;
                        margin-right: 10rpx;
                        padding: 10rpx 0;
                    }
                    .mobile{
                        font-size: 28rpx;
                        line-height: 1;
                        padding-top: 16rpx;
                        color: #999;
                    }
                }
                .address{
                    font-size: 28rpx;
                    line-height: 44rpx;
                    margin: 10rpx 0;
                }
            }
            .edit-address{
                width: 90rpx;
                flex: none;
                display: flex;
                align-items: center;
                text-align: center;
                justify-content: center;
            }
        }
        .address-footer{
            display: flex;
            justify-content: space-between;
            padding: 10rpx 0;
            .default-address{
                font-size: 24rpx;
                padding-left: 30rpx;
                color: #666;
                display: flex;
                align-items: center;
            }
            .delete-address{
                width: 90rpx;
                text-align: center;
                font-size: 24rpx;
                color: #999;
            }
        }
    }
}
.footer{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 200rpx;
    background-color: #efefef;
    .btn-confirm{
    	background-color: $theme-color;
    	color: #fff;
    	position: absolute;
    	bottom: 80rpx;
    	left: 10vw;
    	width: 80vw;
        border-radius: 46rpx;
    }
}

</style>